<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>COPTS Main</title>
	</head>
	<style type="text/css">
		div.date { border-width: 1px; border-style: solid;} 
	</style>
	<body>
		<!-- <form method="post" action="" onclick="checkDate()"> --><h1>Welcome to COPTS Main</h1>
		<h2>Input the time interval to view the topic</h2>
		
			<div class="date">
			<p class="dateLabel">Start Date</p>
			<select name="startYear" id="startYear">
				<option value="2010">2010</option>
				<option value="2011">2011</option>
			</select>
			<select name="startMonth" id="startMonth">
				<option value="1">01</option>
				<option value="2">02</option>
				<option value="3">03</option>
				<option value="4">04</option>
				<option value="5">05</option>
				<option value="6">06</option>
				<option value="7">07</option>
				<option value="8">08</option>
				<option value="9">09</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
			</select>
			<select name="startDay" id="startDay">
				<option value="0">00</option>
				<option value="1">01</option>
				<option value="2">02</option>
				<option value="3">03</option>
				<option value="4">04</option>
				<option value="5">05</option>
				<option value="6">06</option>
				<option value="7">07</option>
				<option value="8">08</option>
				<option value="9">09</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
				<option value="13">13</option>
				<option value="14">14</option>
				<option value="15">15</option>
				<option value="16">16</option>
				<option value="17">17</option>
				<option value="18">18</option>
				<option value="19">19</option>
				<option value="20">20</option>
				<option value="21">21</option>
				<option value="22">22</option>
				<option value="23">23</option>
				<option value="24">24</option>
				<option value="25">25</option>
				<option value="26">26</option>
				<option value="27">27</option>
				<option value="28">28</option>
				<option value="29">29</option>
				<option value="30">30</option>
				<option value="31">31</option>
			</select>
			<select name="startHour" id="startHour">
				<option value="0">00</option>
				<option value="1">01</option>
				<option value="2">02</option>
				<option value="3">03</option>
				<option value="4">04</option>
				<option value="5">05</option>
				<option value="6">06</option>
				<option value="7">07</option>
				<option value="8">08</option>
				<option value="9">09</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
				<option value="13">13</option>
				<option value="14">14</option>
				<option value="15">15</option>
				<option value="16">16</option>
				<option value="17">17</option>
				<option value="18">18</option>
				<option value="19">19</option>
				<option value="20">20</option>
				<option value="21">21</option>
				<option value="22">22</option>
				<option value="23">23</option>
			</select>
			<select name="startMinute" id="startMinute">
				<option value="0">00</option>
				<option value="1">10</option>
				<option value="2">20</option>
				<option value="3">30</option>
				<option value="4">40</option>
				<option value="5">50</option>
			</select>
			<p class="dateLabel">End Date</p>
			<select name="endYear" id="endYear">
				<option value="2010">2010</option>
				<option value="2011">2011</option>
			</select> 
			<select name="endMonth" id="endMonth">
				<option value="1">01</option>
				<option value="2">02</option>
				<option value="3">03</option>
				<option value="4">04</option>
				<option value="5">05</option>
				<option value="6">06</option>
				<option value="7">07</option>
				<option value="8">08</option>
				<option value="9">09</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
			</select> 
			<select name="endDay" id="endDay">
				<option value="0">00</option>
				<option value="1">01</option>
				<option value="2">02</option>
				<option value="3">03</option>
				<option value="4">04</option>
				<option value="5">05</option>
				<option value="6">06</option>
				<option value="7">07</option>
				<option value="8">08</option>
				<option value="9">09</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
				<option value="13">13</option>
				<option value="14">14</option>
				<option value="15">15</option>
				<option value="16">16</option>
				<option value="17">17</option>
				<option value="18">18</option>
				<option value="19">19</option>
				<option value="20">20</option>
				<option value="21">21</option>
				<option value="22">22</option>
				<option value="23">23</option>
				<option value="24">24</option>
				<option value="25">25</option>
				<option value="26">26</option>
				<option value="27">27</option>
				<option value="28">28</option>
				<option value="29">29</option>
				<option value="30">30</option>
				<option value="31">31</option>
			</select>
			<select name="endHour" id="endHour">
				<option value="0">00</option>
				<option value="1">01</option>
				<option value="2">02</option>
				<option value="3">03</option>
				<option value="4">04</option>
				<option value="5">05</option>
				<option value="6">06</option>
				<option value="7">07</option>
				<option value="8">08</option>
				<option value="9">09</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
				<option value="13">13</option>
				<option value="14">14</option>
				<option value="15">15</option>
				<option value="16">16</option>
				<option value="17">17</option>
				<option value="18">18</option>
				<option value="19">19</option>
				<option value="20">20</option>
				<option value="21">21</option>
				<option value="22">22</option>
				<option value="23">23</option>
			</select> 
			<select name="endMinute" id="endMinute">
				<option value="0">00</option>
				<option value="10">10</option>
				<option value="20">20</option>
				<option value="30">30</option>
				<option value="40">40</option>
				<option value="50">50</option>
			</select>
			<br>
			<form id="date" method="post" action="/timeSearch" >
				<input type="hidden" name="_startYear" >
				<input type="hidden" name="_startMonth" >
				<input type="hidden" name="_startDay" >
				<input type="hidden" name="_startHour" >
				<input type="hidden" name="_startMinute" >
				<input type="hidden" name="_startDate">
				
				<input type="hidden" name="_endYear" >
				<input type="hidden" name="_endMonth">
				<input type="hidden" name="_endDay" >
				<input type="hidden" name="_endHour" >
				<input type="hidden" name="_endMinute">
				<input type="hidden" name="_endDate">
				
				<input type="button" name="timeSearchSubmit" value="COPTS!" onclick="checkDate(date);date.submit()">
			</form>
			</div>
		<!-- </form> -->
	</body>
	<script type="text/javascript">
		var currTime = new Date();
		var startTime, endTime;
		
		window.onload = function()
		{
			var today = new Date();
			document.getElementById("startYear").value = today.getFullYear();
			document.getElementById("startMonth").selectedIndex = today.getMonth();
			document.getElementById("startDay").selectedIndex = today.getDate();
			document.getElementById("startHour").selectedIndex = today.getHours();
			document.getElementById("startMinute").selectedIndex = today.getMinutes()/10;
			
			document.getElementById("endYear").value = today.getFullYear();
			document.getElementById("endMonth").selectedIndex = today.getMonth();
			document.getElementById("endDay").selectedIndex = today.getDate();
			document.getElementById("endHour").selectedIndex = today.getHours();
			document.getElementById("endMinute").selectedIndex = today.getMinutes()/10;
		}
		
		function checkDate(form)
		{
			var year = document.getElementById("startYear").value;
			var month = document.getElementById("startMonth");
			var day = document.getElementById("startDay");
			var hour = document.getElementById("startHour");
			var mins = document.getElementById("startMinute");

			var eyear = document.getElementById("endYear").value;
			var emonth = document.getElementById("endMonth");
			var eday = document.getElementById("endDay");
			var ehour = document.getElementById("endHour");
			var emins = document.getElementById("endMinute");
			
			//check the rightness of the itme interval
			if(eyear < year)
			{
				alert("Invalid Year!");
				return;
			}
			
 			if(emonth.selectedIndex < month.selectedIndex)
			{
				alert("Invalid month!");
				return;
			}
			
			if((emonth.selectedIndex == month.selectedIndex) && (ehour.selectedIndex < hour.selectedIndex))
			{
				alert("Invalid hour!");
				return;
			}
			
			if((emonth.selectedIndex == month.selectedIndex) && (eday.selectedIndex < day.selectedIndex))
			{
				alert("Invalide day!");
				return;
			}
			
			if((emonth.selectedIndex == month.selectedIndex) && (eday.selectedIndex == day.selectedIndex) &&(emins.selectedIndex < mins.selectedIndex))
			{
				alert("Invalid minute!");
				return;
			}

			form._startYear.value = year;
			form._startMonth.value = month.options[month.selectedIndex].text;
			form._startDay.value = day.options[day.selectedIndex].text;
			form._startHour.value = hour.options[hour.selectedIndex].text;
			form._startMinute.value = mins.options[mins.selectedIndex].text;
			form._startDate.value = new String(form._startYear.value + form._startMonth.value + form._startDay.value + form._startHour.value + form._startMinute.value + "00"); 
			
			form._endYear.value = eyear;
			form._endMonth.value = emonth.options[emonth.selectedIndex].text;
			form._endDay.value = eday.options[eday.selectedIndex].text;
			form._endHour.value = ehour.options[ehour.selectedIndex].text;
			form._endMinute.value = emins.options[emins.selectedIndex].text;
			form._endDate.value = new String(form._endYear.value + form._endMonth.value + form._endDay.value + form._endHour.value + form._endMinute.value + "00");
			
		}
	</script>
</html>